<template>
  <div class="wh hide" id="wrap" style="overflow: hidden">
    <div class="page1 page" style="position: relative">
      <div class="container" id="scroller">
        <div class="content" style="display: flex;flex-direction: column;height:100vh">
          <img style="z-index: -1;position: absolute;left: 0;right: 0;top:0;bottom: 0;width: 100vw" :src="`/img/background.jpg`" :onerror="defaultImg">
<!--          <div style="width: 100%;height: 80px;line-height: 80px;color:rgb(255,255,208);letter-spacing: 1px;font-size: 16pt;text-align: center">-->
<!--            {{logo}}-->
<!--          </div>-->
          <div style="z-index: 2;height: 80px;line-height: 80px;padding-left: 20px;font-size:14pt;display: block;width: 50vw">
<!--            <div style="color:rgb(255,255,208);font-family: '黑体';letter-spacing: 1px">{{logo}}</div>-->
          </div>
          <div style="text-align: center;color:white;font-size: 21pt">我的礼品</div>
          <div style="height:calc(100vh - 180px);padding: 10px 20px">
            <div style="display: flex">
              <div class="tab tab1" :class="{'active': active == 1}" @click="ontab(2)">未领奖</div>
              <div class="tab tab2" :class="{'active': active == 2}" @click="ontab(1)">已领奖</div>
            </div>
            <div style="background-color:white;height: 320px;border-radius: 0 0 20px 20px;opacity: .8;overflow-y: auto;overflow-x: hidden;padding: 12px;display: flex"
             >
              <div class="tb">
                <div class="cell th">奖品名称</div>
                <div class="cell" v-for="(item,index) in list" :key="index">{{item.prizename}}</div>
              </div>
              <div class="tb">
                <div class="cell th">中奖时间</div>
                <div class="cell" v-for="(item,index) in list" :key="index">{{item.attr3}}</div>
              </div>
              <div class="tb">
                <div class="cell th">操作</div>
                <div class="cell" v-for="(item,index) in list" :key="index">
                  <div v-if="item.iscode">已领取</div>
                  <div v-else-if="item.chao === 0 && !item.iscode">已过期</div>

                  <div @click="receiveCode(item)" v-else-if="deng && !item.iscode" style="border: 1px solid darkred;border-radius: 10px;width: 90px">待核销</div>

                  <div v-else style="border: 1px solid darkred;border-radius: 10px;width: 90px" @click="receive(item)">领取奖励</div>
                </div>
              </div>
            </div>
          </div>

          <div style="width: 100%;height: 88px;text-align: center;">
               <img :src="btn" class="btn btn-back" style="width: 200px;cursor: pointer" @click="goback">
          </div>
        </div>
      </div>
    </div>

    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
    <transition name="fade">
      <div class="fullscreen dialog-cover" v-show="showDialog" ></div>
    </transition>
    <transition name="fade">
      <div class="dialog-content " v-show="showDialog">
        <div style="width: 100vw;height: 100vh;position: relative" >
          <img style="position:absolute;width: 100%;" :src="inputImg" alt="">
          <div style="position: fixed;top: 92vw;left: 0;right: 0;text-align: center">
            <el-input style="width: 60vw;" v-model="name" placeholder="请输入姓名"></el-input>
            <el-input type="number" style="width: 60vw;margin-top: 10px" v-model="phone" placeholder="请输入电话"></el-input>
          </div>

          <img :src="btnl" style="width: 180px" alt="" class="btn_save" @click="saveInfo">
        </div>

        <img :src="close" style="width: 40px;height: 55px;position: fixed;right: 20px;top: 20px; z-index: 9999" alt="" @click="showDialog = !showDialog">
      </div>
    </transition>

    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
    <transition name="fade">
      <div class="fullscreen dialog-cover" v-show="showCodeDialog" ></div>
    </transition>
    <transition name="fade">
      <div class="dialog-content " v-show="showCodeDialog">
        <div style="width: 100vw;height: 100vh;position: relative" >
          <div style="position: fixed;top: 92vw;left: 0;right: 0;text-align: center">
            <el-input type="number" style="width: 60vw;margin-top: 10px" v-model="code" placeholder="请输入核销码"></el-input>
          </div>

          <img :src="btnl" style="width: 180px" alt="" class="btn_save" @click="saveCode">
        </div>

        <img :src="close" style="width: 40px;height: 55px;position: fixed;right: 20px;top: 20px; z-index: 9999" alt="" @click="showCodeDialog = !showCodeDialog">
      </div>
    </transition>
  </div>
</template>

<script>
import { getbackground ,getRule, getPrizeList, receive, saveCode } from '@/api/api'
import btn from '@/assets/btn2.png'
import result from '@/assets/result.png'
import input from '@/assets/input.png'
import btnl from '@/assets/btn5.png'
import close from '@/assets/btn13.png'
export default {
  name: "result",
  data(){
    return{
      bgurl:process.env.VUE_APP_API_BASE,
      logo: '',
      rule: '',
      btn: btn,
      result: result,
      list: [],
      tempList: [],
      showDialog: false,
      name: '',
      phone: '',
      item: {},
      inputImg: input,
      close: close,
      btnl: btnl,
      showCodeDialog: false,
      code: '',
      defaultImg: 'this.src="' + require('@/assets/MG149.jpeg') + '"',
      deng: false,
      active: 2,

    }
  },
  mounted() {
   /* getbackground().then(result => {
      this.logo = result.data.logo
    })*/

    this.initirlize()
  },
  methods:{
    ontab(idx){
      this.active = idx
      switch (this.active){
        case 1:
          this.list = this.tempList.filter(r=>r.iscode === 1)
          break;
        case 2:
          this.list = this.tempList.filter(r=>r.iscode === 0)
          break;
      }
    },
    initirlize(){
      getRule().then(result => {
        this.rule = result.data.content
      })

      let uuid = window.localStorage.getItem("openid")

      getPrizeList(uuid).then(success=>{
        this.tempList = success.data.list
        this.deng = this.tempList.some(r=>r.isget);
        this.list = this.tempList.filter(r=>r.iscode === 0)
      })
    },
    saveCode(){
      if(!this.code){
        this.$alert("请输入核销码","嘉亿中心")
        return
      }

      var storage = window.localStorage
      var uuid = storage.getItem("openid")
      saveCode(uuid, this.item.attr2, this.code).then(success=>{
        if(success.data.message){
          this.$alert(success.data.message, "嘉亿中心")
          return;
        }
        if(success.data.state) {
          this.initirlize()
          this.showDialog =false
          this.showCodeDialog = false
        }
      })

    },
    saveInfo(){
      if(!this.name || !this.phone){
        this.$alert("请输入用户信息", "嘉亿中心")
        return
      }
      if(!this.checkTel(this.phone)){
        this.$alert('电话号码输入不正确！', "嘉亿中心")
        return;
      }
      receive(this.item.attr2,this.name,this.phone).then(success=>{
        if(success.data.message){
          this.$alert(success.data.message,"嘉亿中心")
          return;
        }
        this.$alert("信息登录成功！","嘉亿中心")
        this.initirlize()
        this.showDialog =false
        this.showCodeDialog  = false

      })
    },
    checkTel(tel) {
      var  mobile = /^1[3456789]\d{9}$/ , phone = /^0\d{2,3}-?\d{7,8}$/;
      return  mobile.test(tel) || phone.test(tel);
    },
    receive(item){
      this.item = item;
      this.showDialog = true
    },
    receiveCode(item){
      this.item = item;
      this.showCodeDialog = true
    },
    goback(){
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.btn-back {

  -webkit-animation: bounceInUp 1s linear both, icon 3.0s ease 1s infinite;
}
.tb{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cell{
  min-height: 25px;
  text-align: center;
  color: darkred;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  width: 29vw;
  padding: 5px 0;
}
.th{
  font-weight: bold;
}

.dialog-cover {
  background-color: rgba(0, 0, 0, 0.4);
}
.fullscreen {
  position: fixed;
  left: 0;right: 0;top:0;bottom: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.dialog-content{
  position: fixed;
  left: 0;right: 0;top:0;bottom: 0;
}
.btn_save {
  position: absolute;
  bottom: 88px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.tab {
  flex: 1;
  text-align: center;
  color: red;
  font-size: 14pt;
  font-weight: bold;
  padding: 15px 0;
  opacity: .8;
  background: white;
}
.active{
  background: red;
  color: white
}
.tab1{
  border-radius: 20px 0 0 0 ;
}
.tab2{
  border-radius: 0 20px 0 0 ;
}
</style>
